<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Vue.set全局操作</title>
</head>

<body>
    <h1>Vue.set全局操作</h1>
    <hr>
    <div id="app">
        <!-- <p>{{count}} - {{goods}}</p> -->
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>
    <p><button onclick="add()">Add</button></p>
    <script type="text/javascript">
        function add(){
            // Vue.set(outData,'count',2);
            // app.count++,
            // app.arr[1] = 'ddd'  1.当你利用索引直接设置一个项时，vue不会为我们自动更新。 2.当你修改数组的长度时，vue不会为我们自动更新。
            Vue.set(app.arr,1,'dd')  //只改变数组下标的数据用Vue.set
        }
        var outData = {
            // count:'1',
            // goods:'car'
            arr:['aaa','bbb','ccc']
        }
        var app = new Vue({
            el: '#app',
            data: outData,
        })
    </script>
</body>

</html>